site_8g/src/app/[locale]/(TabBar)/gameList/[[...gameListFlag]]/page.tsx

"use client";
import { Category, GameListRep, searchGameListApi, SearchProps } from "@/api/home";
import Box from "@/components/Box";
import GroupCard from "@/components/Card/GroupCard";
import HeaderBack from "@/components/HeaderBack";
import { Pagination } from "@/types";
import { useSetState } from "ahooks";
import { InfiniteScroll } from "antd-mobile";
import { FC, useRef } from "react";
interface Props {
    searchParams: {
        gameListFlag: string;
        type: 1 | 2;
        bet_type: Category["bet_type"];
        name: string;
    };
}

const GameListFlag: FC<Props> = (props) => {
    const { searchParams } = props;

    const [target, setTarget] = useSetState<{ games: GameListRep[]; page: Partial<Pagination> }>({
        games: [],
        page: { is_end: false },
    });
    const params = useRef<SearchProps>({
        current_page: 0,
        page_size: 15,
        use_page: true,
    });
    // 通过类型判断， 1： 游戏 2：厂商
    if (+searchParams.type === 2) {
        params.current.provider_id = +searchParams.gameListFlag;
    } else {
        params.current.category_id = +searchParams.gameListFlag;
    }
    const getGames = async (): Promise<GameListRep[] | undefined> => {
        return searchGameListApi(params.current).then((res) => {
            if (res.code === 200) {
                setTarget((value) => ({ page: res.page, games: [...value.games, ...res.data] }));
                return res.data;
            }
        });
    };
    const loadMore = async () => {
        params.current.current_page += 1;
        await getGames();
    };
    return (
        <>
            <HeaderBack showBack={true} title={searchParams.name} />
            <main className={"main-header bg-[#1f1f1f]"}>
                <Box>
                    <GroupCard
                        data={target.games}
                        row={1}
                        groupType={Number(searchParams.bet_type) as Category["bet_type"]}
                    />
                    <InfiniteScroll loadMore={loadMore} hasMore={!target.page.is_end!} />
                </Box>
            </main>
        </>
    );
};

export default GameListFlag;